<template>
  <div class="bg-detail" :style="{ minHeight: minh + 'px' }" :class="{paddingTop:showDownloadHead}">
    <download-head v-if="showDownloadHead" :callback="closeHead"></download-head>
    <div class="goods-detail" v-show="loadDataSuccess">
      <div class="icons">
        <div class="img-wrapper">
          <img class="icon-gift" :src="detail.img?detail.img.big_img:''"/>
          <span class="text" v-show="userStatus == 'not_win' || userStatus == 'win'" :class="userStatus">{{goodImgDesc}}</span>
        </div>
      </div>
      <div class="goodinfo-wrapper">
        <h1 class="good-name">{{detail.product_name}}</h1>
        <div class="timenum-wrapper">
          <div class="winning-count">获奖名额:<span style="color: #da2828">{{detail.award_users}}名</span></div>
          <div class="deadline">{{timeName}}<span style="color: #da2828">{{activeTime}}</span></div>
        </div>
        <div class="luckydraw-wrapper" v-if="(isApp && isLogin === '1' && detail.is_join === '1') && detail.jp_type !== '6'">
          <span class="code" :class="{isGray:detail.jp_type === '6'}" >抽奖号码:{{detail.award_code}}</span>
        </div>
        <div class="abortive-wrapper" v-if="detail.jp_type === '6'">
          <span class="abortive">已流拍</span>
          <span class="abortive-desc notjoindesc">在有效期内未筹得足够积分，已流拍。</span>
        </div>
        <div class="abortive-desc-wrapper" v-if="detail.jp_type === '6' && detail.is_join === '1'">
          <span class="abortive-desc">您的积分，将在24小时内回到您的账户，请注意查看</span>
        </div>
        <div class="progress-wrapper">
          <m-progress class="progress" :isAbortive="detail.jp_type === '6'" :max="detail.total_zhushu"
                      :current="detail.now_zhushu"></m-progress>
        </div>
        <div class="partincount-wrapper">
          <div class="now-count-wrapper">
            <span class="now-count">{{detail.now_zhushu}}</span>
            <span class="now-count-name">(已参与)</span>
          </div>
          <div class="total-count-wrapper">
            <span class="total-count">{{detail.total_zhushu}}</span>
            <span class="total-count">(总需人次)</span>
          </div>
          <div class="residue-count-wrapper">
            <span class="residue-count">{{parseInt((detail.total_zhushu)) - parseInt((detail.now_zhushu))}}</span>
            <span class="residue-count">(剩余)</span>
          </div>
        </div>
      </div>
    </div>
    <div class="gift-number-wrapper"  v-show="(detail.coupon?detail.coupon.coupon_code:'') !==''">
      <div class="dividing"></div>
      <div class="gift-number">
        <h1>请根据商品详情指导使用券码</h1>
        <div class="code-wrapper">
          <div class="number-title">奖品券码：</div><div class="number">{{detail.coupon?detail.coupon.coupon_code:''}}</div>
        </div>
      </div>
    </div>
    <div class="express-desc-wrapper" v-show="(detail.is_lucky === '1') && (detail.product_type==='1') && detail.express && detail.express.addr && detail.express.addr !== ''">
      <div class="dividing"></div>
      <div class="express-desc">
        <h1>请关注您的物流信息：</h1>
        <div class="user-desc">
          <div class="express-icon-wrapper">
            <div class="express-icon"></div>
            <div class="express-text">收件人信息</div>
          </div>
          <div class="rignt-desc">
            <a @click="getDefaultByWccia('9')" class="change-address">修改收货地址>></a>
          </div>
        </div>
        <div class="name-number" v-if="detail.express">
          <span class="name">{{detail.express?detail.express.name:''}}</span>
          <span class="number">{{detail.express?detail.express.tel:''}}</span>
        </div>
        <span class="address" v-if="detail.express">{{detail.express?detail.express.addr:''}}</span>
        <div class="cut-line"></div>
        <div class="express-icon-wrapper">
          <div class="express-icon"></div>
          <div class="express-text">物流追踪</div>
        </div>
        <ul class="express-list">
          <li class="express-item" v-for="(item, index) in (detail.express?detail.express.express_info:'')">
            <div class="item-time">{{item.time}}</div>
            <div class="right-wrapper">
              <div class="express-description">{{item.context}}</div>
              <div class="line-wrapper"></div>
              <span class="circle"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="win-list" v-show="detail.jp_type === '5'">
      <div class="dividing"></div>
      <h1>获奖名单：</h1>
      <ul>
        <li class="win-item" v-for="(item, index) in detail.person">
          <div class="item-desc">
            <div class="user-icon-wrapper">
              <img class="user-icon" :src="getFaceUrl(item.face_img)" onerror="onError=null;src='./static/img/img_default_avatar.png'">
              <img class="icon-flag" src="./img/icon_flag.png">
            </div>
            <div class="user-name">{{item.name}}</div>
            <div class="win-number">{{item.award_code}}</div>
          </div>
          <div class="dividing"></div>
          <div class="icon-congratulate"></div>
        </li>
      </ul>
      <h2>{{detail.award_code_content}}</h2>
    </div>
    <div class="activity-rules" v-show="loadDataSuccess">
      <div class="dividing"></div>
      <div class="activity-desc">
        <div class="desc-content" v-html="htmlContent">
        </div>
      </div>
    </div>
    <div class="footer-wrapper" v-show="isBtnShow===true" :class="{orange : isOrange,yellow: isYellow}" v-on:click="btnClick()">
      <div class="btn-bg" >
        <span class="des">{{this.btnDes}}</span>
        <span class="time">{{this.timeDes}}</span>
        <m-count-down v-show="detail.left_second  && detail.jp_type !== '5' && detail.jp_type !== '6'" class="deadLine" :deadLine="detail.left_second" :callback="loadData"></m-count-down>
      </div>
    </div>
    <m-result-dialog v-show="isDialogShow" v-on:listenToDialog="listenTheDialog" :type="dialogType"
                     :shareTitle="shareTitle" :shareConent="shareContent" :shareUrl="shareUrl" :shareImgUrl="shareImgUrl"></m-result-dialog>
  </div>
</template>


<script type="text/ecmascript-6">

  import mProgress from '../../components/progress/progress.vue'
  import mCountDown from '../../components/countdown/CountDown.vue'
  import mResultDialog from '../../components/join_result_dialog/JoinResultDialog.vue'
  import refreashData from '../../../static/js/dropload/dropload.min.js'
  import downloadHead from '../../components/downloadhead/DownloadHead.vue'

  const ERR_OK = '0'
  const NORMAL = 'normal'
  const WIN = 'win'
  const NOT_WIN = 'not_win'

  export default {
    data() {
      return {
        minh: 0,
        detail: {},
        isBtnShow: false,
        isOrange: false,
        isYellow: false,
        btnDes: '',
        timeDes: '',
        goodImgDesc:'',
        isLogin:'0',
        isDialogShow:false,
        dialogType:' ',
        showDownloadHead: false,
        isApp: true,
        params: '',
        shareTitle: '',
        shareContent: '',
        shareUrl: '',
        shareImgUrl: '',
        loadDataSuccess: false,
        timeName: '',
        htmlContent: '',
      }
    },
    created() {
      this.minh = document.documentElement.clientHeight
      this.isApp = this.wccconfig.isApp
      this.showDownloadHead = !this.isApp
      this.shareUrl = location.href.substr(0,location.href.indexOf('?')) + '?jpid=' + this.utils.getQueryString(location, 'jpid')
      this.params = this.utils.getUrlParams(location.href)
      this.wccconfig.urlParams = this.params
      if (!this.isApp) {
        this.params = this.utils.removeQueryString(this.params, ['urid'])
      }
      this.loadData()
      var vueThis = this
      setTimeout(function(){
        vueThis.utils.doPvTJ('积分众筹单品详情页', vueThis.utils.getQueryString(location.href, 'jpid'))
      },100)
      $(function () {
        $('.bg-detail').dropload({
          scrollArea: window,
          loadUpFn: function (me){
              vueThis.loadData(function() {
                me.resetload()
              })
          }
        })
      })
    },
    computed: {
      userStatus() {
        let status = ''
        if (this.detail) {
          if (this.detail.jp_type === '6' ) {
            status = NOT_WIN
            this.goodImgDesc = '已流拍'
          } else if(this.detail.jp_type === '5') {
              if (this.detail.is_lucky === '1') {
                status = WIN
                this.goodImgDesc = '已中奖'
              } else {
                status = NOT_WIN
                this.goodImgDesc = '未中奖'
              }
          } else {
            status = NORMAL
          }
          return status
        }
      },
      activeTime() {
        let time = ''
        if (this.detail.jp_type === '3'){
          time = this.detail.active_start
          this.timeName = '开抢时间:'
        } else if (this.detail.jp_type === '2') {
          time = this.detail.active_end
          this.timeName = '截止时间:'
        } else if (this.detail.jp_type === '4') {
          time = this.detail.pub_time
          this.timeName = '开奖时间:'
        } else if (this.detail.jp_type === '5') {
          time = this.detail.reach_time
          this.timeName = '达成时间:'
        } else if (this.detail.jp_type === '6') {
          time = this.detail.active_end
          this.timeName = '截止时间:'
        }
        return time
      },
      ruleDetail() {
          if (this.detail && this.detail.rule){
            return this.detail.rule.replace(new RegExp(/(\r\n)/g),'<br>')
          } else {
              return ''
          }
      }
    },
    methods: {
      btnClick(){
          let vue = this
          if(!this.isApp){
            this.isDialogShow = true
            this.dialogType = '4'
            return
          }

          if(this.isLogin !== '1') {
            if (this.isOrange && this.detail.is_join === '0' && this.detail.jp_type === '2'){
              this.utils.doClickTJ('click', 'pointraised', 'startbtn', 'notlogin', '')
            }
            if (this.utils.supportWccia()){
              this.wccia.checkLogin(function (urid) {
                let url = vue.utils.updateUrl(vue.wccconfig.buildUrl('/Jfproduct/detail' + vue.params), 'urid', urid)
                vue.params = url.substr(url.indexOf('?'))
                vue.loadData()
              })
            } else {
              this.dialogType = '5'
              this.isDialogShow = true
            }
          }else if (this.isOrange && this.detail.is_join === '0' && this.detail.jp_type === '2'){
              this.joinActive()
              this.utils.doClickTJ('click', 'pointraised', 'startbtn', 'login', '')
          }else if (this.isYellow && this.detail.jp_type === '5' && this.detail.is_join === '1' && this.detail.is_lucky !== '1'){
            location.href = "wccia://webview/" + vue.detail.coupon_url
          } else if (this.isOrange) {
              this.getDefaultByWccia('8')
          }
      },
      joinActive(){
        this.$http.get(this.wccconfig.buildUrl('/Jfproduct/order' + this.utils.makeSign(this.params))).then((response => {
          response = response.body;
          if (response) {
            this.dialogType = response.errno
            if (response.errno !== '255') {
              this.isDialogShow = true
            }
            this.loadData()
          } else {
            this.isDialogShow = false
          }
        }))
      },
      listenTheDialog(type){ /** type： 0-分享；1-扫码；2-看看其他；3-OK 5-关闭*/
        this.isDialogShow = false
        switch (type){
          case 0:
            break
          case 1:
            break
          case 2:
            location.href = 'wccia://close/'
            break
          case 3:
            this.loadData()
            break
          case 4:
              break
          case 5:
              if (this.dialogType === '3') {
                 this.loadData()
              }
              break
          case 6:
              this.updateAddress()
              break
          default:
            break
        }
      },
      loadData(callback){
        let vue = this
        let url = this.wccconfig.buildUrl('/Jfproduct/detail' + this.params)
//        let url = "/api/detail"
        this.$http.get(url).then((response) => {
          response = response.body
          if (response.errno === ERR_OK) {
            vue.detail = response.data
            vue.isLogin = response.is_login
            if (vue.isApp) {
              vue.shareTitle = response.data.share_title
              vue.shareContent = response.data.share_content
              vue.shareImgUrl = vue.detail.img.share_img
              let type = vue.detail.jp_type
              if ((type === '2' || type === '3') && this.utils.supportShare()) {
                vue.wccia.share(vue.shareTitle, vue.shareContent, vue.shareUrl, vue.shareImgUrl, true)
              }
            }
            vue.handlerHtml(vue.detail.product_detail)
            vue.btnshow()
            if (callback && callback instanceof Function){
              callback()
            }
          }
          vue.loadDataSuccess = true
        })
      },
      handlerHtml(str) {
        for (let size = 10; size <= 36; size++) {
          let oldStr = 'font-size: '+ size +'px'
          let newStr = 'font-size: .'+ size+'rem'
          str = str.replace(new RegExp(oldStr,'gm'), newStr)
        }
        this.htmlContent = str
      },
      btnshow() {
        //this.isBtnShow = true;
        //活动即将开始  json返回值 2:进行中、3:即将开始、4:等待开奖、5:已开奖、6:已流拍
        if (this.detail.jp_type === '3') {
          this.isBtnShow = true
          this.isOrange = false
          this.btnDes = this.detail.single_point +'积分 '
          this.timeDes = '开抢倒计时'
          return
        }
        //未参与，进行中
        if (this.detail.is_join === '0' && this.detail.jp_type === '2') {
          this.isBtnShow = true
          this.isOrange = true
          this.btnDes = this.detail.single_point + '积分立即参与 '
          this.timeDes = '倒计时'
          return
        }
        //已参与 未达成 进行中
        if (this.detail.is_join === '1' && this.detail.jp_type === '2') {
          this.isBtnShow = true
          this.isOrange = false
          this.btnDes = '已参与 '
          this.timeDes = '活动倒计时'
          return
        }
        //未参与、已参与 已达成 等待开奖
        if (this.detail.jp_type === '4') {
          this.isBtnShow = true
          this.isOrange = false
          this.btnDes = '等待开奖 '
          if (this.detail.left_second <= 0) {
            this.btnDes = '正在开奖 '
          }
          this.timeDes = '开奖倒计时'
          return
        }
        //已参与、已中奖、实物没有收货地址
        if (this.detail.is_lucky === '1' && this.detail.product_type==='1' && !(this.detail.express && this.detail.express.addr && this.detail.express !=='')) {
          this.isBtnShow = true
          this.isOrange = true
          this.btnDes = '完善收货信息'
          return
        }
        //已参与，未中奖
        if(this.detail.jp_type === '5' && this.detail.is_join === '1' && this.detail.is_lucky !== '1' && this.detail.coupon_url){
          this.isBtnShow = true
          this.isYellow = true
          this.btnDes = '查看福利券'
          return
        }
        this.isBtnShow = false
      },
      updateAddress() {
        location.href = "wccia://jump/65"
        let vue = this
        setTimeout(function () {
          vue.dialogType = '3'
          vue.isDialogShow = true
        },300);
      },
      getDefaultByWccia(type) {
        if (!this.utils.notLessThan935()) {
          this.dialogType = type
          this.isDialogShow = true
          return
        }
        let vue = this
        vue.wccia.getAddress(function (response) {
          if (response) {
            if (typeof response === 'string') {
              response = JSON.parse(response)
            }
            let addr = response.address
            let url = vue.wccconfig.buildUrl('/Jfproduct/address' + vue.params + '&name=' + response.name + '&tel=' + response.phone + '&addr=' + addr)
            vue.$http.get(url).then(response => {
              response = response.body
              if (response.errno === ERR_OK) {
                vue.loadData()
              } else {
                alert(response.msg)
              }
            })
          }
        })
      },
      getFaceUrl (subUrl) {
        return this.utils.getRealUrl(subUrl)
      },
      closeHead() {
        this.showDownloadHead = false
      }
    },

    components: {
      mProgress,
      mCountDown,
      mResultDialog,
      downloadHead
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">

  @import "../../common/stylus/mixin.styl"
  @import '../../../static/js/dropload/dropload.css'

  .icon-line
    width 100%

  .dividing
    width 100%
    height .2rem
    background #f3f3f3
    margin-bottom .2rem

  .gift-number, .express-desc
    display inline-block
    width 89%
    font-size .3rem

  .abortive-desc
    font-size .28rem
    color #6c6c6c
    line-height .3rem

  .bg-detail
    background-color white
    background-size 100% 8.22rem
    background-repeat repeat-y
    text-align center
    font-size 0
    &.paddingTop
      padding-top .95rem

  .bg-detail
    position relative
    .gift-number
      text-align left
      h1
        margin .1rem 0 .13rem 0
        font-size 0.3rem
        color black
      .code-wrapper
        margin-bottom .1rem
        width 100%
        display flex
        .number-title
          color #ee564c
          padding .02rem
          flex 0 0 all
        .number
          margin-bottom 0.13rem
          padding .02rem .02rem .01rem .02rem
          flex 1
          word-break break-all
          word-wrap break-word
          font-family 'STXihei'
          color #33282e
    .express-desc
      text-align left
      color #a0a0a0
      h1
        margin .1rem 0 .1rem 0
        font-size 0.3rem
        color black
      .user-desc
        display flex
        .express-icon-wrapper
          position relative
          vertical-align top
          margin-top 0.1rem
          .express-icon
            display inline-block
            height 0.34rem
            width 0.38rem
            background-size .34rem .38rem
            background-image url("./img/icon_person.png")
            background-repeat no-repeat
          .express-text
            display inline-block
            vertical-align top
            font-size .3rem
            line-height .38rem
            color #646464
        .rignt-desc
          font-size 0.26rem
          margin-left 0.16rem
          flex auto
          position relative
          .change-address
            color #ee564c
            position absolute
            vertical-align middle
            right 0
            top .18rem
      .name-number
        margin-top 0.17rem
        position relative
        font-size .34rem
        color black
        .number
          position absolute
          right 0
      .address
        margin-top 0.17rem
        display inline-block
        font-size .3rem
        color #a0a0a0
      .cut-line
        margin-top 0.2rem
        border-1px(#a0a0a0)
      .express-icon-wrapper
        position relative
        vertical-align top
        margin-top 0.3rem
        .express-icon
          display inline-block
          height 0.38rem
          width 0.38rem
          background-size .38rem .38rem
          background-image url("./img/icon_express.png")
          background-repeat no-repeat
        .express-text
          display inline-block
          vertical-align top
          font-size .3rem
          line-height .4rem
          color #646464
      .express-list
        color #a0a0a0
        font-family 'STXihei'
        font-size 0.3rem
        padding-top 0.1rem
        margin-bottom .1rem
        .express-item
          display flex
          width 100%
          height auto
          min-height 0.65rem
          line-height 1.15
          .item-time
            display inline-block
            font-size .25rem
            white-space nowrap
          .right-wrapper
            flex 1
            position relative
            margin-left .2rem
            .circle
              position absolute
              display inline-block
              background-color #a0a0a0
              border-radius 50%
              top .05rem
              width 0.12rem
              height 0.12rem
            .line-wrapper
              position absolute
              height 100%
              width .02rem
              left .05rem
              top .15rem
              text-align center
              background-color #a0a0a0
            .express-description
              font-size 0.27rem
              padding-left 0.4rem
              word-break break-all
              word-wrap break-word
          &:first-child
            color #148af7
            .right-wrapper
              .circle
                background-color #148af7
          &:last-child
            .right-wrapper
              .line-wrapper
                display none
    .win-list
      text-align left
      font-family 'STXihei'
      display inline-block
      width 100%
      font-size .3rem
      h1
        font-size .34rem
        margin 0 0.35rem 0.09rem 0.35rem
        color black
      .win-item
        width 89%
        text-align center
        position relative
        margin 0 auto
        .item-desc
          padding-top 0.1rem
          padding-bottom 0.1rem
          display flex
          height .76rem
          line-height .76rem
          margin-left .2rem
          margin-right .8rem
          .user-icon-wrapper
            height .70rem
            width .70rem
            display inline-block
            position relative
            .user-icon
              height .68rem
              width .68rem
              border-radius 50%
              border 1px solid #148af7
            .icon-flag
              position absolute
              right 0
              bottom 0
              width .28rem
              height .22rem
          .user-name
            flex auto
            color black
          .win-number
            min-width .6rem
            text-align right
            color #148af7
            display inline-block
        .dividing
          width 100%
          height 1px
          background #f3f3f3
          margin-top .1rem
          margin-bottom .1rem
          text-overflow ellipsis
          line-clamp 3
        &:last-child
          .dividing
            display none
        .icon-congratulate
          display inline-block
          position absolute
          right 0
          bottom 0
          height 0.55rem
          width 0.66rem
          background-size .55rem .60rem
          background-image url("./img/icon_win.png")
          background-repeat no-repeat
      h2
        margin-top 0.26rem
        margin-bottom 0.2rem
        text-align center
        font-size 0.26rem
        font-family 'STXihei'
        color #6c6c6c
    .activity-rules
      padding-bottom 1.1rem
      position relative
      font-family 'STXihei'
      color #3c3c3c
      .activity-desc
        display inline-block
        width 89%
        .desc-content
          text-align justify
          font-size 0.28rem
          margin-top -0.03rem
          margin-bottom 0.18rem
          min-height 0.4rem
          overflow auto
          padding-top .03rem
          padding-bottom 0.1rem
          line-height 1.15
          word-break break-all
          word-wrap break-word
          img
            width 100%
            max-width 100%
          a
            text-decoration underline
    .footer-wrapper
      background-color #bfbfbf
      position fixed
      height 1.12rem
      width 100%
      bottom 0
      display flex
      align-items center
      justify-content center
      &.orange
        background-color #ff6600
      &.yellow
        background-color #feb817
      .btn-bg
        color white
        display inline-block
        span,m-count-down
          font-size 0.3rem


  .goods-detail
    width 89%
    margin 0 auto
    font-family 'STXihei'
    .icons
      position relative
      text-align center
      margin .2rem 0
      .img-wrapper
        height 4rem
        width 4rem
        font-size 0
        margin 0 auto
        border 1px solid #d2d2d2
        border-radius .05rem
        position relative
        .icon-gift
          width 4rem
          height 4rem
          background-size 4rem 4rem
          overflow hidden
        .text
          position absolute
          display inline-block
          font-size .34rem
          line-height .46rem
          color white
          padding 0 .1rem
          left 0
          top 0
          &.win
            background #e53935
          &.not_win
            background #bfbfbf
    .goodinfo-wrapper
      text-align left
      h1
        font-family 'STHeiti'
        font-size 0.36rem
        line-height .4rem
        color black
        text-align justify
      .timenum-wrapper
        position relative
        display flex
        width 100%
        margin-top .15rem
        .deadline, .winning-count
          font-size .3rem
          height .3rem
          color #3c3c3c
        .winning-count
          flex 1
        .deadline
          flex 2
      .progress-wrapper
        margin-top .18rem
      .partincount-wrapper
        margin-top 0.13rem
        margin-bottom .18rem
        display flex
        width 100%
        .now-count-wrapper
          flex 0 0 all
          display block
          .now-count, .now-count-name
            display block
            font-size .22rem
            color #3c3c3c
            flex 1
            text-align center
        .total-count-wrapper
          display block
          flex auto
          .total-count
            display block
            font-size .22rem
            color #3c3c3c
            flex 1
            text-align center
        .residue-count-wrapper
          flex 0 0 all
          display block
          .residue-count
            display block
            font-size .22rem
            color black
            flex 1
            text-align center
      .luckydraw-wrapper
        margin-top .2rem
        .code
          flex 0 0 all
          font-size .34rem
          color #ee564c
          &.isGray
            color #595959
      .abortive-wrapper
        margin-top .12rem
        display flex
        .abortive
          flex 0 0 all
          font-size .3rem
          color #ee564c
          margin-right .1rem
        .notjoindesc
          flex 1
      .abortive-desc-wrapper
        margin-top .1rem
        padding-bottom .05rem

</style>
